<template>
  <e-container :loading="loading">
    <a-space direction="vertical" :size="24" style="width: 100%">
      <a-space :size="24">
        <a-button size="small" @click="() => router.push({ name: 'Service Price', params: { id: id } })">
          <template #icon>
            <e-icon type="Aright" />
          </template>
        </a-button>
        <e-title title="Negotiated Service Price" />
      </a-space>
      <price-editor
        v-if="priceLoaded"
        :readonly="true"
        :price-info="priceInfo"
        :selected-language-pair="sLang + '-' + tLang"
        :pin-height="60" />
    </a-space>
  </e-container>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ServicePrice from '@/api/client/servicePrice.js'
import EContainer from '@/components/EContainer.vue'
import PriceEditor from '@/pages/Client/servicePrice/components/PriceEditor.vue'
import ETitle from '@/components/ETitle.vue'
const route = useRoute()
const router = useRouter()
const { id, sLang, tLang } = route.params
const loading = ref(true)
const priceInfo = ref([])
const priceLoaded = ref(false)
ServicePrice.getNegotiatedPrice(id)
  .then(({ data }) => {
    priceLoaded.value = true
    priceInfo.value = data
  })
  .finally(() => {
    loading.value = false
  })
</script>

<style lang="less" scoped></style>
<route lang="yaml">
name: negotiatedPrice
path: '/client/:id/service-price/negotiated/:sLang/:tLang'
meta:
  title: 'Negotiated Service Price'
  permission: ServicePrice
</route>
